<template>
	<div id="app">
		<el-tabs type="border-card">
		    <el-tab-pane label="autocmplete">
		    	<!--autocmplete应用-->
			  	<el-row>
				    <el-col :span="12">
						<el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="搜索"  @select="handleSelect"></el-autocomplete>
						<el-button slass="sech" type="primary">搜索</el-button>
					</el-col>
				</el-row>
		  </el-tab-pane>
		  <el-tab-pane label="echarts">
			  	<!--树形echarts表格-->
				<div id="myChart" :style="{width: '600px', height: '300px'}"></div>
				<!--饼形echarts表格-->
				<div id="myCharts" :style="{width: '600px', height: '300px'}"></div>
		  </el-tab-pane>
		  <el-tab-pane label="树形控件">
		  	<input type="text" v-model="inputl" />
			  	<!--树形控件-->
				<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
		  </el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
export default{
	name:"app",
	data(){
		return{
			data: [{
	          label: '河南省',
	          children: [{
	            label: '周口市',
	            children: [{
	              label: '商水',
	              children:[{
	              	label:'胡吉镇',
	              	children:[{
	              		label:'蔡庄'
	              	}]
	              },{
	              	label:'固墙镇',
	              	children:[{
	              		label:'余庄'
	              	}]
	              }]
	            }]
	          },{
	          	label: '郑州市',
	            children: [{
	              label: '新郑市'
	            }]  
	          }]
	        }, {
	          label: '学校',
	          children: [{
	            label: '班级',
	            children: [{
	              label: '学生'
	            }]
	          }, {
	            label: '院系',
	            children: [{
	              label: '专业'
	            }]
	          }]
	        }, {
	          label: '公司',
	          children: [{
	            label: '部门',
	            children: [{
	              label: '职位'
	            }]
	          }, {
	            label: '后勤',
	            children: [{
	              label: '职位'
	            }]
	          }]
	        }],
	        defaultProps: {
	          children: 'children',
	          label: 'label'
	        },
		    restaurants: [],
	        state1: '',
	        state2: '',
	        inputl:""
		}	
	},
	 methods: {
	 	handleNodeClick(data) {
         this.inputl=data.label
      },
	    handleClose(done) {
	        this.$confirm('确认关闭？').then(_ => {
	            done();
	         }).catch(_ => {});
	      },
	 	  drawLine(){
		    // 基于准备好的dom，初始化echarts实例
		    let myChart = this.$echarts.init(document.getElementById('myChart'))
		    let myCharts = this.$echarts.init(document.getElementById('myCharts'))
//		           绘制柱形图
		    myChart.setOption({
		        title: { text: '小明成绩柱形图' },
		        tooltip: {},
		        xAxis: {
		            data: ["语文","数学","英语","物理","化学","历史"]
		        },
		        yAxis: {},
		        series: [{
		            name: '小明分数',
		            type: 'bar',
		                data: [80, 85, 78, 55, 67, 66]
		        }]
		    });
		    //绘制饼形图
		    myCharts.setOption({
		    series : [
		        {
		            name: '饼形图',
		            type: 'pie',
		            radius: '55%',
		            data:[
		                {value:235, name:'视频广告'},
		                {value:274, name:'联盟广告'},
		                {value:310, name:'邮件营销'},
		                {value:335, name:'直接访问'},
		                {value:400, name:'搜索引擎'},
		            ]
		        }
		    ]
		})
		  },
	      querySearch(queryString, cb) {
	        var restaurants = this.restaurants;
	        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
	        // 调用 callback 返回建议列表的数据
	        cb(results);
	      },
	      createFilter(queryString) {
	        return (restaurant) => {
	          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
	        };
	      },
	      loadAll() {
	        return  [
	          { "value": "王小虎"},
	          { "value": "王二狗"},
	          { "value": "张亚"},
	          { "value": "张飞"},
	          { "value": "李亚"},
	          { "value": "张飞想"},
	          { "value": "王天龙"}
	        ];
	      },
	      handleSelect(item) {
//	        console.log(item);
//	        console.log("这是点击autocompele推荐出来的词条时所触发的事件")
	      }
	 },
	mounted() {
	    this.restaurants = this.loadAll();
	    this.drawLine();
	}
    
}
</script>

<style>
	#app{
		width: 1000px;
		margin: 0 auto;
	}
	/*.el-menu-demo{
		margin-top: 10px;
	}*/
	.el-tabs{
		min-height: 300px;
	}
</style>